import React, { Component } from 'react'
import { Icon } from 'react-vant';
import '../order.css'
import axios from 'axios'
import { NavBar } from 'react-vant';
import { Button } from 'react-vant';
export default class order extends Component {
    state = {
        list: [],
        value: ''
    }
    constructor() {
        super();
        this.value = ''
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    componentDidMount() {
        axios({
            url: '/api/shopcar',
            method: 'post'
        }).then(res => {
            console.log(res);
            this.setState({
                list: res.data.data
            })
        })
    }
    handleChange(e) { // 选择
        this.setState({
            value: e.target.value
        })
        axios({
            url: '/api/searchtype',
            method: 'post',
            data: { value: e.target.value }
        }).then(res => {
            console.log(res);
            this.setState({
                list: res.data.data
            })
        })
        console.log(e.target.value);

    }
    handleSubmit(e) {
        if (this.state.value === '') {
            alert('未选择')
        } else {
            alert('你的选择是' + this.state.value);
            e.preventDefault(); // 阻止默认行为，在提交之前需要验证的时候先拦截一下
        }
    }
    goback = () => {
        this.props.history.go(-1)
    }
    render() {
        const { list } = this.state

        return (
            <div className="order">
                <div className="orderheader">
                    <NavBar
                        title="订单"
                        leftArrow
                        onClickLeft={() => this.goback()}
                        rightText={<Icon name="search" size={24} />}
                    />
                </div>
                <div className="ordermain">
                    <div className="orderTop">
                        <div>图文咨询</div>
                        <div>电话咨询</div>
                        <div>
                            <form onSubmit={this.handleSubmit}>
                                <select onChange={this.handleChange}>
                                    <option value="其他">其他</option>
                                    <option value="处方药">处方药</option>
                                    <option value="非处方药">非处方药</option>
                                </select>
                                {/* <input type="submit" value="提交" /> */}
                            </form>
                        </div>
                    </div>
                    <div className="ordercon">

                        <div className="carcon">
                            {
                                list?.map((item, ind) => {
                                    return <div className='GwcItem' key={ind}>
                                        <Button type="warning">{item.type}</Button>
                                        <img src={item.img} alt='' />
                                        <div className='Gwcright'>
                                            <p>{item.title}40g*{item.num}粒</p>
                                            <div className='Goumainum'>
                                                <span>￥{item.price}</span>
                                            </div>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}